<template>
    <div>
        <Modal
                v-model="modal"
                title="月份统计下载"
                :closable="false"
                :mask-closable="false"
                width="400px">
            <Form
                    ref="formValidate"
                    :model="formItem"
                    :label-width="100">
                <FormItem label="选择月份" prop="time">
                    <DatePicker type="month"
                                placeholder="选择月份"
                                style="width: 200px"
                                @on-change="handleChange">
                    </DatePicker>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="text" size="large" @click="cancel">取消</Button>
                <Button type="primary" size="large" @click="submit" v-preventReClick>下载
                </Button>
            </div>
        </Modal>
    </div>
</template>

<script>

    export default {
        name: "MonthRecord",
        props: ['modal'],
        data() {
            return {
                formItem: {
                    time: '',
                }
            }
        },
        methods: {
            //提交
            submit() {
                if (this.formItem.time == '') {
                    this.$Message.error('月份不能为空');
                } else {
                    let a = document.createElement('a')
                    a.href = "/api/record/download/month/" + this.formItem.time
                    a.click();
                    this.$parent.cancel()
                }
            },
            handleChange(date) {
                this.formItem.time = date;
            },
            cancel() {
                this.$parent.cancel()
            },
        }
    }
</script>

<style scoped>

</style>
